<template>
  <view class="rain-bar">
    <view class="bar-bg">
      <view
        class="bar-fill"
        :style="{
          height: fillHeight + '%',
          backgroundColor: fillColor
        }"
      ></view>
    </view>
    <!-- 可选：在柱子下方显示档位 -->
    <view v-if="showLevel" class="level-text">档{{ currentLevel }}</view>
  </view>
</template>

<script>
export default {
  name: 'RainBar',
  props: {
    rainfall: {
      type: [Number, String],
      default: 0
    },
    // 是否显示档位文字
    showLevel: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 转换为数字处理
    rainfallNum() {
      const n = parseFloat(this.rainfall);
      return isNaN(n) ? 0 : n;
    },
    // 当前颜色
    fillColor() {
      return this.getColor(this.rainfallNum);
    },
    // 当前档位
    currentLevel() {
      return this.getLevelInColor(this.rainfallNum);
    },
    // 填充高度
    fillHeight() {
      return this.getFillPercent(this.rainfallNum);
    }
  },
  methods: {
    // 根据降雨量返回颜色
    getColor(r) {
      if (r >= 0.2 && r <= 0.9) return '#52c41a';   // 绿色
      if (r >= 1 && r <= 9.9) return '#1890ff';     // 蓝色
      if (r >= 10 && r <= 24.9) return '#096dd9';   // 深蓝
      if (r >= 25 && r <= 49.9) return '#fadb14';   // 黄色
      if (r >= 50 && r <= 99.9) return '#fa8c16';   // 橙色
      if (r >= 100 && r <= 199.9) return '#f5222d'; // 红色
      if (r >= 200) return '#722ed1';               // 紫色
      return '#d9d9d9';                             // 无降水灰色
    },

    // 获取等级 1~4
    getLevelInColor(r) {
      if (r < 0.2) return 0;
      
      // 定义颜色带范围
      const bands = [
        { min: 0.2, max: 0.9 },    // 绿色
        { min: 1, max: 9.9 },      // 蓝色
        { min: 10, max: 24.9 },    // 深蓝
        { min: 25, max: 49.9 },    // 黄色
        { min: 50, max: 99.9 },    // 橙色
        { min: 100, max: 199.9 },  // 红色
      ];
      
      // 找到对应的颜色带
      const band = bands.find(b => r >= b.min && r <= b.max);
      if (band) {
        const t = (r - band.min) / (band.max - band.min);
        const lvl = Math.floor(t * 4) + 1;
        return Math.min(lvl, 4);
      }
      
      // 紫色带（200+）直接返回4档
      if (r >= 200) return 4;
      
      return 0;
    },

    // 填充百分比
    getFillPercent(r) {
      const lvl = this.getLevelInColor(r);
      if (lvl === 0) return 6; // 无降水显示小条
      return lvl * 25; // 档1=25%, 档4=100%
    }
  }
};
</script>

<style lang="scss" scoped>
.rain-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-bg {
  width: 24rpx;              
  height: 120rpx;            
  background-color: #f0f2f5; 
  border-radius: 6rpx;
  position: relative;
  overflow: hidden;
  // border: 1rpx solid #e8e8e8;
  // box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);

  .bar-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 6rpx 6rpx 0 0;
    transition: all 0.3s ease;
  }
}

.level-text {
  font-size: 18rpx;
  color: #666;
  margin-top: 6rpx;
}
</style>